<template>
	<view class="apply-agent">
		<image class="banner" :src="storeImage" mode="aspectFill" />
		<view class="returns" @click="gotoPage('/pages/index/index')">返回首页</view>
		<view class="form-row d-b-c d-r">
			<image class="label mr20" :src="userInfo.avatarUrl||'/static/default.png'"></image>
			<view class="value-wrap flex-1 d-b-s d-c">
				<text class="value">{{ userInfo.nickName }}</text>
				<text class="f24 gray9 mt10">会员ID:{{ userInfo.userId  }}</text>
			</view>
		</view>
		<scroll-view class="list scroll-Y" scroll-y="true" :style="'height:' + scrollviewHigh + 'px;'"
			lower-threshold="50" @scrolltoupper="scrolltoupperFunc" @scrolltolower="scrolltolowerFunc">
			<view class="list-item d-b-c d-r" v-for="(item,index) in products" :key="index">
				<image class="thumb " :src="item.imagePath||'/static/default.png'" mode="aspectFill" />
				<view class="info d-s-s d-c flex-1 hh100">
					<text class="title mt20" number-of-lines="2">{{ item.productName }}</text>
					<view class="bottom-row d-b-c d-r ww100 mb20">
						<text class="price">¥{{ item.productPrice}}</text>
						<view class="btn-earn" @click="goDetail(item)">
							<text class="icon iconfont icon-gouwudai"></text>
						</view>
					</view>
				</view>
			</view>

			<view class="d-c-c p30" v-if="products.length==0 && !loading">
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">亲，暂无相关记录哦</text>
			</view>
			<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue";
	export default {
		components: {
			uniLoadMore,
		},
		data() {
			return {
				/*手机高度*/
				phoneHeight: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				no_more: false,
				loading: true,
				/*最后一页码数*/
				last_page: 0,
				/*当前页面*/
				page: 1,
				/*每页条数*/
				list_rows: 20,
				products: [

				],
				userInfo: {},
				userId: '',
				refereeId: '',
				storeImage: '',
			};
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.products.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		onLoad(e) {
			if (e.refereeId) {
				uni.setStorageSync("refereeId", e.refereeId);
			}
			this.refereeId = uni.getStorageSync("refereeId") || '';
			this.init();
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			});

			this.getData();
		},
		methods: {
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						self.scrollviewHigh = self.phoneHeight;
					}
				});
			},
			/*可滚动视图区域到顶触发*/
			scrolltoupperFunc() {
				console.log('滚动视图区域到顶');
			},

			/*可滚动视图区域到底触发*/
			scrolltolowerFunc() {
				let self = this;
				if (self.page < self.last_page) {
					self.page++;
					self.getData();
				}
				self.no_more = true;
			},
			getData() {
				let self = this;
				let page = self.page;
				self.loading = true;
				let list_rows = self.list_rows;
				self._postBody('user/agent/store', {
						refereeId: self.refereeId,
						pageIndex: page || 1,
						pageSize: list_rows,
					}, function(data) {
						self.loading = false;
						self.products = data.data.list.records;
						self.storeImage = data.data.storeImage;
						self.userInfo = data.data.userInfo;
						self.last_page = data.data.list.last_page;
						if (data.data.list.last_page <= 1) {
							self.no_more = true;
							return false;
						}

						uni.hideLoading();
					},
					(err) => {
						// #ifndef H5
						uni.navigateBack({
							delta: parseInt(1)
						});
						// #endif
					});
			},
			goDetail(item) {
				let url = '/pages/product/detail/detail?productId=' + item.productId;
				this.gotoPage(url);
			},

		}
	};
</script>

<style lang="scss" scoped>
	.apply-agent {
		position: relative;
		width: 750rpx;
		min-height: 1334rpx;
		background-color: #f9f9f9;
	}

	.returns {
		position: absolute;
		top: 20rpx;
		right: 0;
		padding: 10rpx 20rpx;
		background: rgba(255, 255, 255, 0.85);
		border-radius: 26rpx 0 0 26rpx;

	}

	// 顶部背景图
	.banner {
		width: 750rpx;
		height: 348rpx;
	}


	// 推荐人
	.form-row {
		position: relative;
		top: -100rpx;
		background: #ffffff;
		margin: 0 20rpx;
		padding: 30rpx 30rpx;
		border-radius: 20rpx;
	}

	.label {
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
	}

	.apply-a {

		margin: 0 20rpx;
		padding: 10rpx;
		background: linear-gradient(0deg, #F93A20 0%, #F93D21 100%);
		border-radius: 25rpx;
	}

	.apply-tip {
		margin: 20rpx 20rpx 0 20rpx;
		font-weight: 400;

		color: #333;

		.iconfont {
			font-size: 30rpx;
			color: #FF3645;
		}
	}

	.value-wrap {
		margin: 10rpx;
	}

	.value {
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;

	}

	.iconfont {
		font-size: 30rpx;
		color: #CCCCCC;
	}

	// 申请条件
	.list {
		width: 710rpx;
		flex: 1;
		margin: -70rpx 20rpx;
	}

	.list-item {

		height: 248rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 10rpx;
	}

	.thumb {
		width: 210rpx;
		height: 210rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.info {
		flex: 1;
		justify-content: space-between;
	}

	.title {
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.bottom-row {

		margin-top: 20rpx;
	}

	.price {
		font-size: 28rpx;
		font-weight: 600;
		color: #FF5649;
	}

	.btn-earn {
		background: #FF3645;
		border-radius: 28rpx;
		width: 54rpx;
		height: 54rpx;
		font-size: 24rpx;
		line-height: 54rpx;
		text-align: center;

		.iconfont {
			color: #FFFFFF;
		}


	}

	// 加载更多文本
	.load-more {
		text-align: center;
		color: #999999;
		font-size: 24rpx;
		padding: 30rpx 0;
	}

	// 商品列表
	.product-list {

		background: #ffffff;
		border-radius: 20rpx;
		max-height: 600rpx;
	}

	.product-item {

		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.product-item:last-child {
		border-bottom: none;
	}

	.select-box {
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}



	.info {
		flex: 1;
	}

	.name {
		font-size: 26rpx;
		color: #333333;
		line-height: 1.4;
	}

	.price {
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #FF5649;
		font-weight: 600;
	}

	.cart-btn {
		width: 54rpx;
		height: 54rpx;
		background: #FF3645;
		border-radius: 50%;
		text-align: center;
	}

	.cart-btn .iconfont {
		font-size: 36rpx;
		line-height: 54rpx;
		color: #FFFFFF;
	}
</style>